<script setup lang="ts">
import { useThemeStore } from '../stores/theme'
import { NCard, NSpace, NButton, NSwitch, NRadioGroup, NRadio } from 'naive-ui'
import type { ThemeMode } from '../stores/theme'

const themeStore = useThemeStore()

async function handleModeChange(mode: ThemeMode): Promise<void> {
  await themeStore.setThemeMode(mode)
}
</script>

<template>
  <n-card title="主题切换示例" class="max-w-600px mx-auto mt-8">
    <n-space vertical :size="24">
      <!-- 当前主题信息 -->
      <div>
        <p class="text-sm text-gray-600 mb-2">当前主题模式</p>
        <p class="text-lg font-semibold">{{ themeStore.themeMode }}</p>
      </div>

      <div>
        <p class="text-sm text-gray-600 mb-2">实际使用主题</p>
        <p class="text-lg font-semibold">{{ themeStore.actualTheme }}</p>
      </div>

      <!-- 主题切换按钮 -->
      <div>
        <p class="text-sm text-gray-600 mb-2">快速切换</p>
        <n-space>
          <n-button @click="handleModeChange('light')">亮色</n-button>
          <n-button @click="handleModeChange('dark')">暗色</n-button>
          <n-button @click="handleModeChange('auto')">自动</n-button>
        </n-space>
      </div>

      <!-- 开关切换 -->
      <div class="flex items-center gap-4">
        <span>🌞</span>
        <n-switch
          :value="themeStore.actualTheme === 'dark'"
          @update:value="(v) => handleModeChange(v ? 'dark' : 'light')"
        />
        <span>🌙</span>
      </div>

      <!-- 单选框切换 -->
      <div>
        <p class="text-sm text-gray-600 mb-2">主题模式</p>
        <n-radio-group :value="themeStore.themeMode" @update:value="handleModeChange">
          <n-space>
            <n-radio value="light">亮色</n-radio>
            <n-radio value="dark">暗色</n-radio>
            <n-radio value="auto">跟随系统</n-radio>
          </n-space>
        </n-radio-group>
      </div>
    </n-space>
  </n-card>
</template>
